<template>
  <div class="smart-service">
    <BottomArrow />
    <Solution :titles="solution.titles" :theme="solution.theme" :content="solution.content"/>
    <div class="our-capability">
      <OurCapability />
    </div>
    <CoreScenario :title="'Core scenario'" :sub-title="'核心场景'"/>
    <div class="scence-wrapper">
      <ScenceCard v-for="item in scences1"
                  :key="item.title"
                  :title="item.title"
                  :url="item.url" :bgColor="item.bg"
                  :bgSize="item.bgSize"
                  :border-color="item.border"/>
    </div>

    <div class="scence-wrapper scence-wrapper-bottom">
      <ScenceCard v-for="item in scences2"
                  :key="item.title"
                  :title="item.title"
                  :url="item.url" :bgColor="item.bg"
                  :bgSize="item.bgSize"
                  :border-color="item.border"/>
    </div>
    <ProductChart :title="'Product chart'"
                  :sub-title="'产品架构图'"
                  :bg-size="'96%'"
                  :url="require('../assets/imgs/service/product_chart.png')"/>
    <FooterView />
  </div>
</template>

<script>
  import BottomArrow from '../components/BottomArrow';
  import Solution from '../components/Solution';
  import OurCapability from '../components/OurCapability';
  import CoreScenario from '../components/MainTitle';
  import ScenceCard from '../components/ScenceCard';
  import ProductChart from '../components/ProductChart';
  import FooterView from '../components/FooterView';
  export default {
    name: 'SmartService',
    data() {
      return {
        solution: {
          titles: ['Smart', 'service', 'solutions'],
          theme: {
            title: '智能服务解决方案',
            descrips: ['IT运维现代化 深化运维分析技能']
          },
          content:
            '利用AI技术赋能服务体系，通过数智手段驱动主动服务触达能力，真正以“用户为中心”贯穿整体服务体系，将汽车后市场领域的服务价值最大化' +
            '通过对客户多渠道触达，智询帮助企业感知市场和用户需求，助力企业持续升级产品服务，并主动探知市场增长点。' +
            '通过成熟的技术手段，在用户全生命周期为用户提供最优的服务体验，主动挖掘客户潜在需求，从根本上将传统的被动式、等待式服务升级为主动式、智能化服务。'
        },
        scences1: [
          {title: '智能问答服务', url: require('../assets/imgs/service/core1.png'), bg: '#2525E9', border: '#06BCFD', bgSize: '65%'},
          {title: '绩效 + 考核', url: require('../assets/imgs/service/core2.png'), bg: '#033DFF', border: '#D8DF20', bgSize: '65%'},
          {title: '客户访问', url: require('../assets/imgs/service/core3.png'), bg: '#2525E9', border: '#06BCFD', bgSize: '65%'}
        ],
        scences2: [
          {title: '拓客营销', url: require('../assets/imgs/service/core4.png'), bg: '#033DFF', border: '#EFAB38', bgSize: '65%'},
          {title: '行为监控', url: require('../assets/imgs/service/core5.png'), bg: '#2525E9', border: '#00FF01', bgSize: '52%'},
          {title: '数据管理 + 分析', url: require('../assets/imgs/service/core6.png'), bg: '#033DFF', border: '#FBFE00', bgSize: '65%'}
        ]
      };
    },
    components: {
      BottomArrow,
      Solution,
      OurCapability,
      CoreScenario,
      ScenceCard,
      ProductChart,
      FooterView
    }
  };
</script>

<style lang="less">
  .smart-service {
    position: relative;
  }
  .our-capability {
    margin-top: 100px;
    margin-bottom: 100px;
  }
.scence-wrapper {
  display: flex;
  justify-content: center;
}

.scence-wrapper-bottom {
  margin-bottom: 100px;
}

  @media screen and (max-width: 768px) {
    .smart-service {
      position: relative;
    }
    .our-capability {
      margin-top: 50px;
      margin-bottom: 50px;
    }
    .scence-wrapper {
      display: flex;
      justify-content: center;
    }
    .scence-wrapper-bottom {
      margin-bottom: 50px;
    }
  }
</style>
